/* INFO — DOCUMENTATION */


/* --------------------------------------------------------- manual */

#manual {
    hyphens: auto;
    font-size: 1.1em;
    max-width: 60em;
    user-select: text;
    margin: auto;
    padding: var(--double-spacing);
}
#manual a {
    text-decoration: underline;
    text-underline-offset: .15em;
    color: currentColor;
}

#manual p {
    line-height: 1.4em;
    margin: 1em 0;
}
#manual li {
    margin: 5px 0;
    line-height: 23px;
}

#manual a[href^="https://"]::after {
    content: " ◥";
    color: var(--main-color);
}

#manual a[href^="#"]::after {
    content: " ✻";
    color: var(--main-color);
    white-space: nowrap;
}

#manual i {
    font-style: normal;
    color: #7b97b9;
}

#manual h1 {
    display: none;
}

#manual h2 {
    font-size: 40px;
    margin-block: 2em .5em;
    font-size: clamp(3em, 3vw, 6em);
    background: none;
    color: var(--text3-color);
    padding: 0;
    scroll-margin-top: 1em;
}

#manual h3 {
    background-color: var(--main-color);
    margin: 2em 0 1em;
    padding: var(--spacing);
    font-size: 35px;
    width: auto;
    border-width: 2px;
    border-radius: var(--radius);
    background: var(--secondary-background-color);
    display: inline-block;
    scroll-margin-top: 1em;
}

#manual h4 {
    border-bottom: solid 2px var(--main-color);
    font-size: x-large;
    margin: 1em 0;
    scroll-margin-top: 1em;
}

#manual h5 {
    text-transform: uppercase;
    margin-top: 50px;
    margin-bottom: 0;
    margin-left: 0;
    font-size: medium;
    border: solid 1px;
    width: fit-content;
    padding: 0 3px;
    border-left: 8px solid;
    border-color: var(--main-color);
}

#manual table {
    margin-top: 12px;
}
#manual th {
    background-color: unset;
    border-bottom: 1px solid;
}

#manual th,
#manual td {
    padding: var(--spacing) 0;
}

#manual ul {
    list-style: inside disc;
    padding-inline-start: 10px;
}

#manual pre {
    padding: var(--half-spacing) var(--spacing);
    background-color: var(--code-color);
    white-space: pre-wrap;
    border-radius: var(--radius);
    line-height: 1.4;
}

#manual kbd {
    background-color: var(--main-color);
    color: var(--text2-color);
    padding: 1px 4px;
    border-radius: 7px;
    box-shadow: 2px 2px;
    margin: 0 2px;
}
#manual code {
    width: fit-content;
    font-family: monospace;
    white-space: pre-wrap;
    display: inline;
    padding: var(--half-spacing);
    border-radius: var(--radius);
    background-color: var(--code-color);
    color: var(--code-background-color) !important;
}

#manual pre code  {
    padding: 0;
}

#manual blockquote {
    margin: 30px 0;
    margin-left: 15px;
    padding-left: 5px;
    border-left: solid 3px var(--main-color);
}


/* --------------------------------------------------------- media queries */

@media (max-width: 750px) {
    #manual {
        font-size: 1em;
    }
}


@media (max-width: 550px) {
    main {
      display: block;
      overflow: scroll;
    }
}


/* --------------------------------------------------------- toc */

#toc {
    overflow: hidden; /* allow scroll */
    min-width: 180px;
    background: var(--primary-background-color);
    padding-bottom: 2em;
}

#toc .scroll > :not(h2){
    padding: var(--double-spacing);
}

.summary {
    padding: var(--spacing);
    line-height: 1.4;
}

.summary li a {
    text-decoration: none;
}

.summary li a:hover {
    text-decoration: underline;
}

.summary > li {
    margin-bottom: 10px;
}

.summary > li > a {
    font-weight: bold;
    font-size: 1.15em;
}

.summary > li > ul > li > ul {
    font-size: var(--size-small);
    border-left: solid 2px var(--main-color);
    padding-left: 5px;
    margin-left: 5px;
    margin-block: 6px;
    opacity: 0.9;
}

.summary > li > ul {
    padding-left: 15px;
}
